<template>
  <div class="header">
    <el-row style="width: 100%">
      <el-col :span="3" class="title">vue3 Wiki之路</el-col>
      <el-col
        :class="pathName.includes(value) ? 'nav-active nav-item' : 'nav-item'"
        v-for="(value, item) in navType"
        :key="item"
        :span="navSapn[item]"
      >
        <div @click="gotoLink(value)">{{ item }}</div>
      </el-col>
      <el-col :span="5" :offset="4" class="loginOrOut" @click="loginOpen"
        >登陆</el-col
      >
    </el-row>
  </div>
  <el-dialog title="登陆" v-model="loginShow" width="30%">
    <Login />
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, toRef } from "vue";
import { useRoute, useRouter } from "vue-router";

import { loginFun } from "./use/login";
import { navType, navSapn } from "./Header.const";

import Login from "./component/login.component.vue";

export default defineComponent({
  name: "Header",

  components: { Login },

  setup(props, context) {
    //弹窗
    const { loginShow, loginOpen, loginClose } = loginFun();

    const route = useRoute();
    const router = useRouter();
    const pathName = toRef(route, "path");

    const gotoLink = (link: string) => {
      router.push(`/${link}`);
    };

    return {
      navType,
      navSapn,
      pathName,
      gotoLink,
      loginShow,
      loginOpen,
      loginClose,
    };
  },
});
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 64px;
  line-height: 64px;
  color: white;
  background-color: #001529;
  .title {
    font-size: 20px;
    font-weight: 700;
  }
  .loginOrOut {
    text-align: right;
  }
  .nav-active {
    background-color: #1890ff;
  }
  .nav-item {
    cursor: pointer;
  }
}
</style>
